<template>
	<div class="map">
		<div class="map1"><img src="@/static/bi/lbx.png" /></div>
		<div class="map2"><img src="@/static/bi/jt.png" /></div>
		<div class="map3" id="map"></div>
	</div>
</template>

<script>
	import echarts from 'echarts';
	import china from 'echarts/map/json/china.json';
	import city from './city.js';
	echarts.registerMap('china', china);
	export default {
		data() {
			return {
				mapDom: null,
				mapOption: []
			};
		},
		methods: {
			async mapData(isLoading = true) {
				if (isLoading) {
					this.mapDom.showLoading({
						text: '加载中 · · ·',
						color: '#02a6b5',
						textColor: '#fff',
						maskColor: 'rgba(4, 6, 51, 0)'
					});
				}

				const res1 = this.$db['wmzmall-member']
					.collection()
					.where({
						is_plus: '会员'
					})
					.groupBy('member_city')
					.groupField('count(*) as cnt')
					.get();

				let res = {
					code: 0,
					datas: []
				};

				await Promise.all([res1]).then(resData => {
					resData[0].result.data.forEach(x => {
						if (!x.member_city) return false;
						let cnt = x.cnt;
						let pro = x.member_city.split('-')[2];
						let data = res.datas.find(d => d.pro == pro);
						if (data) {
							data.cnt += cnt;
							return false;
						}

						res.datas.push({
							name: pro,
							value: cnt
						});
					});
				}).catch(() => {
					if (isLoading) {
						this.mapDom.hideLoading();
					}
				})

				if (isLoading) {
					this.mapDom.hideLoading();
				}

				if (res.datas.length > 0) {
					res.code = 200;
				}

				if (res.code == 200) {
					let mapData = [];
					res.datas.forEach(x => {
						let geoCoord = city[x.name];
						if (geoCoord) {
							mapData.push({
								name: x.name,
								value: geoCoord.concat(x.value)
							});
						}
					});
					this.mapOption.series[0].data = mapData;
				}
				this.mapDom.setOption(this.mapOption);
			},
			mapCharts(callback) {
				this.mapDom = this.$echarts.init(document.getElementById('map'));

				this.mapOption = {
					tooltip: {
						trigger: 'item',
						formatter: function(params) {
							if (typeof params.value[2] == 'undefined') {
								return ' ' + params.name + ': ' + params.value + '  ';
							} else {
								return ' ' + params.name + ': ' + params.value[2] + '  ';
							}
						}
					},
					geo: {
						map: 'china',
						label: {
							normal: {
								show: true,
								fontSize: '10',
								color: 'rgba(255,255,255,0.5)'
							}
						},
						roam: true,
						zoom: 1.15,
						scaleLimit: {
							min: 1.15,
							max: 30
						},
						itemStyle: {
							areaColor: 'rgba(4, 6, 51, 1)',
							borderColor: 'rgba(0, 32, 151, 1)',
							emphasis: {
								areaColor: 'rgba(4, 6, 51, 0.7)',
								borderColor: 'rgba(0, 32, 151, 0.7)'
							}
						},
						emphasis: {
							label: {
								show: true,
								color: 'rgba(255,255,255, 0.8)'
							}
						}
					},
					series: [{
						name: '用户分布',
						type: 'scatter',
						coordinateSystem: 'geo',
						symbolSize: function(val) {
							return val[2] + 4;
						},
						label: {
							normal: {
								formatter: '{b}',
								position: 'right',
								show: false
							},
							emphasis: {
								show: true
							}
						},
						itemStyle: {
							normal: {
								color: '#ff6a6c'
							}
						},
						data: []
					}]
				};

				window.addEventListener('resize', () => {
					this.mapDom.resize();
				});

				if (typeof callback === 'function') {
					callback();
				}
			}
		},
		mounted() {
			this.mapCharts(() => {
				this.mapData();
			});
		},
		created() {
			uni.$on('biRefresh', () => {
				this.mapData(false);
			});
		}
	};
</script>

<style>
	.map {
		position: relative;
		z-index: 9;
		height: calc(100% - 5.15rem);
		margin-bottom: 0.1rem;
	}

	.map img {
		width: 100%;
		border: none;
	}

	.map1,
	.map2 {
		position: absolute;
		opacity: 0.5;
	}

	.map1 {
		width: 4.93rem;
		z-index: 2;
		top: 0.2rem;
		left: 1.51rem;
		animation: myfirst2 15s infinite linear;
	}

	.map2 {
		width: 4.16rem;
		top: 0.6rem;
		left: 1.91rem;
		z-index: 3;
		opacity: 0.2;
		animation: myfirst 10s infinite linear;
	}

	.map3 {
		width: 100%;
		height: 100%;
	}

	.map3>>>div {
		z-index: 999;
	}

	@keyframes myfirst2 {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(359deg);
		}
	}

	@keyframes myfirst {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(-359deg);
		}
	}
</style>
